<template>
<div class="box-div" @click="showAlert('你单击了div标签')">单击事件</div>
<div class="box-div" @dblclick="showAlert('你双击了div标签')">双击事件</div>
<div class="box-div" @contextmenu="showAlert('你右击了div标签')">右击事件</div>
<div class="box-div" @mouseout="showAlert('你的指针移出了div标签')"
@mouseover="showAlert('你的指针移入了div标签')">指针移入移出事件</div>
</template>

<script setup>
function showAlert(msg){
  window.alert(msg)
}
</script>

<style>
.box-div {
  padding: 8px;
  margin: 8px 0;
  background-color: chocolate;
  font-size: 18px;
}

</style>